<template>
    <div class="w750" :class="themes.theme" :style="{ '--themescolor': themes.color }" style="font-size: 0.25rem">
        <div class="invoice">
            <van-form @submit="saveInvoice">
                <div class="rounded-15 overflow-h mt-1">
                    <div class="bg-white">
                        <van-field name="radio" label="发票类型" input-align="right" label-class="font-14" style="font-size: 13px" :border="false">
                            <template #input>
                                <van-radio-group v-model="invData.invTitleType" direction="horizontal">
                                    <van-radio name="PERSONAL" :checked-color="themes.color" icon-size="13px">个人或事业单位</van-radio>
                                    <van-radio name="ENTERPRISE" :checked-color="themes.color" icon-size="13px" @click="isDown = true">
                                        企业
                                    </van-radio>
                                </van-radio-group>
                            </template>
                        </van-field>
                        <van-field
                            v-model="invData.invTitle"
                            label="发票抬头"
                            :border="false"
                            input-align="right"
                            label-class="font-14"
                            style="font-size: 13px"
                            placeholder="请填写需要开具发票的企业名称"
                        />
                        <van-field
                            v-if="invData.invTitleType == 'ENTERPRISE'"
                            v-model="invData.invIdfctMark"
                            label="税号"
                            placeholder="纳税人识别号"
                            label-class="font-14"
                            style="font-size: 13px"
                            :border="false"
                            input-align="right"
                        />
                    </div>
                </div>
                <div v-if="invData.invTitleType == 'ENTERPRISE'" class="mt-1 bg-white rounded-15 overflow-h">
                    <van-field
                        v-model="invData.invDepositBank"
                        label="开户银行"
                        placeholder="选填"
                        input-align="right"
                        :border="false"
                        label-class="font-14"
                        style="font-size: 13px"
                    />
                    <van-field
                        v-model="invData.invBankAccout"
                        label="银行账号"
                        placeholder="选填"
                        input-align="right"
                        :border="false"
                        label-class="font-14"
                        style="font-size: 13px"
                    />
                    <van-field
                        v-model="invData.invRegAddr"
                        label="企业地址"
                        placeholder="选填"
                        input-align="right"
                        :border="false"
                        label-class="font-14"
                        style="font-size: 13px"
                    />
                    <van-field
                        v-model="invData.invRegPhone"
                        label="企业电话"
                        placeholder="选填"
                        input-align="right"
                        label-class="font-14"
                        style="font-size: 13px"
                        :border="false"
                    />
                </div>
                <!-- 发票内容 -->
                <div class="mt-1 bg-white rounded-15 overflow-h">
                    <van-field label="设置为默认抬头" label-width="100" :border="false" input-align="right">
                        <template #input>
                            <van-checkbox v-model="invData.defaultTitle" :checked-color="themes.color" icon-size="15px" />
                        </template>
                    </van-field>
                </div>

                <div style="margin: 16px; margin-top: 60px; padding-bottom: 30px">
                    <van-button round block type="info" native-type="submit" :color="themes.color" style="height: 40px; font-size: 16px">
                        完成
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import legendImage from 'components/legendImage/legendImage'
import { invoice } from 'api/invoiceManage'

export default {
    components: {
        legendImage
    },
    data() {
        return {
            invData: {
                invTitleType: 'PERSONAL'
            } //数据
        }
    },

    watch: {},
    mounted() {
        const item = this.$route.query.item
        if (item) {
            this.invData = JSON.parse(item)
        }
    },
    methods: {
        //返回
        goback() {
            this.$router.back()
            this.$router.isBack = true
        },

        //填写完成  保存
        saveInvoice() {
            if (this.invData.invTitleType != 'PERSONAL' && this.invData.invTitleType != 'ENTERPRISE') {
                this.$toast('发票类型不能为空')
                return
            }
            if (!this.invData.invTitle || this.invData.invTitle.trim() == '') {
                this.$toast('发票抬头不能为空')
                return
            }

            if (this.invData.invTitleType == 'ENTERPRISE') {
                if (!this.invData.invIdfctMark || this.invData.invIdfctMark.trim() == '') {
                    this.$toast('税号不能为空')
                    return
                }
                if (this.invData.invRegPhone) {
                    const reg = /^((0\d{2,3}-\d{7,8})|(1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}))$/ // 验证手机号码
                    const regPhone = /^(0[0-9]{2,3}\-)([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/ //座机号码
                    // 当填写电话号码时
                    if (!regPhone.test(this.invData.invRegPhone) && !reg.test(this.invData.invRegPhone)) {
                        this.$toast('请输入正确的企业电话,可以为座机号码或手机号码')
                        return
                    }
                }
            }

            // 删除不需要的东西
            delete this.invData.createTime
            delete this.invData.shopId
            delete this.invData.updateTime
            delete this.invData.userId
            this.$dialog
                .confirm({
                    message: '是否确认保存发票抬头'
                })
                .then(() => {
                    invoice.saveUserInvoiceTitle(this.invData).then((res) => {
                        if (res.status == 1) {
                            this.$toast('提交成功')
                            this.goback()
                        } else {
                            this.$toast(res.msg)
                        }
                    })
                })
        }
    },
    computed: {
        ...mapState(['themes'])
    }
}
</script>
<style scoped>
.invoice .img {
    width: 60px;
    height: 60px;
}
.icon {
    vertical-align: middle;
    padding: 0.05rem 0.08rem 0.08rem 0;
}
.van-radio__icon {
    height: 1.1em !important;
}
.van-cell {
    padding: 0.2rem 0.25rem;
}
.van-cell__right-icon {
    margin-left: 8px;
    margin-right: 3px;
}
</style>
